<template>
  <div>
    <el-divider content-position="left" >并发症</el-divider>
    <el-table size="small" :data="state.dataList" v-loading="state.loading" border
              :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
              @sort-change="sortChangeHandle">
      <!--      <el-table-column label="并发症" center>-->
      <el-table-column type="index" label="#" width="45"/>
      <el-table-column prop="illness" label="病症名称" show-overflow-tooltip/>
      <el-table-column prop="type" label="病变类型" show-overflow-tooltip/>
      <el-table-column prop="year" label="病变年数" show-overflow-tooltip/>
      <!--      </el-table-column>-->
    </el-table>
    <pagination template-size="small" @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                v-bind="state.pagination"/>
  </div>
</template>
<script setup lang="ts" name="illnessView">
import {BasicTableProps, useTable} from "/@/hooks/table";
import {fetchListIllness} from "/@/api/life";

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: fetchListIllness,
  createdIsNeed: false,
})

const {
  getDataList,
  tableStyle,
  sortChangeHandle,
  currentChangeHandle,
  sizeChangeHandle,
} = useTable(state)


const getData = (val: any) => {
  state.queryForm.customerId = val.id
  if (state.queryForm.customerId) {
    getDataList()
  }
}

const clearData = () => {
  state.dataList = []
}

defineExpose({
  getData,
  clearData
})


</script>

<style scoped lang="scss">

</style>
